import React from 'react';
import { Layout,Dropdown,Menu,Avatar } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined
} from '@ant-design/icons'
import {useNavigate} from "react-router-dom";
import {connect} from "react-redux";
import {CollapsedAction} from "../../redux/actions/CollapsedAction";

const { Header } = Layout

const TopHeader = (props) => {
    // const [collapsed,setCollapsed]=useState(false)
    const navigate=useNavigate()
    const {username,role:{roleName},id}=JSON.parse(localStorage.getItem('token'))

    const changeCollapsed=()=>{
        //setCollapsed(!collapsed)
        props.changeCollapsed()
    }

    const menu = (
        <Menu>
            <Menu.Item key={id}>
                {roleName}
            </Menu.Item>
            <Menu.Item key={username} danger onClick={()=>{
                localStorage.removeItem('token')
                navigate('/login')
            }}>退出</Menu.Item>
        </Menu>
    );

    return (
        <Header className="site-layout-background" style={{ padding: '0 24px'}}>
            {props.isCollapsed ? <MenuUnfoldOutlined onClick={changeCollapsed}/> : <MenuFoldOutlined onClick={changeCollapsed}/> }

            <div style={{float:'right'}}>
                <span style={{padding:'0 5px'}}>欢迎{username}</span>
                <Dropdown overlay={menu}>
                    <Avatar size="large" icon={<UserOutlined />} />
                </Dropdown>
            </div>
        </Header>

    );
}
const mapStateToProps=({CollapsedReducer:{isCollapsed}})=>{
    return {
        isCollapsed
    }
}

export default connect(
    mapStateToProps,
    {
        changeCollapsed:CollapsedAction
    }
)(TopHeader);